<template>
  <div class="income app-wrapper">
      <div class="panel-income">
          <div class="income-list">
              <div class="income-item">
                <p class="money">321.8</p>
                <p>待结算(元)</p>
                <p><button type="button" class="button">查看明显</button></p>
              </div>
              <div class="income-item">
                <p class="money">321.8</p>
                <p>可体现金额(元)</p>
                <p><button type="button" class="button">查看明显</button></p>
              </div>
              <div class="income-item">
                <p class="money">321.8</p>
                <p>已体现金额(元)</p>
                <p><button type="button" class="button">查看明显</button></p>
              </div>
          </div>
          <div class="income-counts">
              历史总收益：<b>654.85</b>元
          </div>
      </div>

      <div class="income-list-wrapper">
        <div class="income-nav-list">
            <a class="cell-item cell-item-arrow">
              <div>收益明显</div>
              <i class="icon van-icon van-icon-arrow"></i>
            </a>
            <a class="cell-item cell-item-arrow">
              <div>个人收益分析</div>
              <i class="icon van-icon van-icon-arrow"></i>
            </a>
            <a class="cell-item cell-item-arrow">
              <div>分销收益分析</div>
              <i class="icon van-icon van-icon-arrow"></i>
            </a>
            <a class="cell-item cell-item-arrow">
              <div>红包记录</div>
              <i class="icon van-icon van-icon-arrow"></i>
            </a>
        </div>
        <p class="tip text-center">如需进行直播间收益提现，请到个人中心>直播间后台>直播间收益去提现</p>
        <button type="button" class="button-block">我也要做直播</button>
      </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.panel-income {
  height: 420px;
}

.income-list {
    display: flex;
    padding: 70px 0;
    font-size: 24px;
    color: #fff;
    background: linear-gradient(#318bff, #103ee7);
    align-items: center;
    justify-content: center;
    text-align: center;
    p {
      line-height: 2.5;
    }
    .money { font-size: 48px; line-height: 1.5; }
    > .income-item {
        flex: 1;
        position: relative;
        &:after{
          content: '';
          width: 2px;
          height: 136px;
          background-color: rgba(252,255,255, .2);
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        &:last-child:after {
          display: none;
        }
    }

    .button {
        width: 110px;
        height: 48px;
        font-size: 24px;
        color: #7b5606;
        line-height: 48px;
        background-color: #fcba2e;
        border-radius: 8px;
    }
}

.income-counts {
    height: 90px;
    padding-left: 36px; 
    font-size: 24px;
    line-height: 90px;
    color: #fff;
    background-color: #1549eb;
    > b { font-size: 36px; }
}


.income-list-wrapper {
  height: calc(100% - 420px);
  padding: 0 35px;
  background-color: #fff;

  .button-block {
    display: block;
    width: 100%;
    height: 88px;
    border: 1px solid #1549eb;
    font-size: 32px;
    text-align: center;
    line-height: 86px;
    color: #1549eb;
    background-color: #fff;
    border-radius: 8px;
  }
}

.cell-item {
  display: block;
  height: 100px;
  border-bottom: 2px solid #f3f3f3;
  font-size: 30px;
  color: #333;
  line-height: 100px;
  position: relative;

  div { flex: 1; }
  .icon {
    font-size: 32px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.tip {
  margin: 48px 0;
  font-size: 24px;
  color: #666;
  line-height: 42px;
  > a {
    color: #1549eb;
  }
}
</style>